<template>
	<view class="content" style="padding-top: 60rpx;">
		<uni-nav-bar title="个人中心" fixed="true" shadow="true"></uni-nav-bar>
		<view class="logo">
			<view v-if="!logined" class="name-box">
				<image src="../../static/center/touxiang.png"></image>
				<navigator url="../../pages/center/login" class="names">登录</navigator>
			</view>
			<view v-if="logined" class="name-box">
				<image :src="swichIcon()"></image>
				<view>
					<view class="names" @click="updateName(userinfo.usersName)">{{userinfo.usersName}}</view>
					<view @click="goJifenRecord()" style="margin-left: 20rpx;color: #C0C4CC;margin-top: 5rpx;">积分:<span id="jifen">{{usersIntegral}}</span></view>
					<view style="margin-left: 20rpx;color: #C0C4CC;margin-top: 5rpx;">直推:{{userinfo.userstuinumber}}团队:{{userinfo.userstuannumber}}</view>
				</view>
			</view>
			<view class="name-box" @click="download()">
				<image src="../../static/center/xz.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="order-box">
			<view class="all-order">
				<view class="tips">商品订单</view>
				<view class="all-order2">
					<navigator url="orders/orderList?index=0">查看全部订单</navigator>
					<image src="../../static/center/gd.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="order-types-box">
				<view class="types-item" @click="goOrders(1)">
					<image src="../../static/center/dfk2.png" mode="widthFix"></image>
					<view>待付款</view>
					<view class="badge" v-if="dfkcount>0">{{dfkcount}}</view>
				</view>
				<view class="types-item" @click="goOrders(2)">
					<image src="../../static/center/dfh2.png" mode="widthFix"></image>
					<view>待发货</view>
					<view class="badge" v-if="dfhcount>0">{{dfhcount}}</view>
				</view>
				<view class="types-item" @click="goOrders(3)">
					<image src="../../static/center/dsh2.png" mode="widthFix"></image>
					<view>待收货</view>
					<view class="badge" v-if="dshcount>0">{{dshcount}}</view>
				</view>
				<view class="types-item" @click="goRefund()">
					<image src="../../static/center/tuihuo2.png" mode="widthFix"></image>
					<view>退换货</view>
					<view class="badge" v-if="thhcount>0">{{thhcount}}</view>
				</view>
			</view>
		</view>
		<!-- 选项片 -->
		<view class="shouhuo-box" style="padding-bottom: 130rpx;">
			<view class="item" @click="wallet()" id="wallet" v-if="isGzh">
				<view>
					<image src="../../static/center/qb.png" mode="widthFix" class="icons"></image>
					<text>我的钱包</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="saoyisao()">
				<view>
					<image src="../../static/center/saoyisao.png" mode="widthFix" class="icons"></image>
					<text>扫一扫</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="chongzhi()">
				<view>
					<image src="../../static/center/chongzhi.png" mode="widthFix" class="icons"></image>
					<text>充值中心</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="shouHuo()">
				<view>
					<image src="../../static/center/wz.png" mode="widthFix" class="icons"></image>
					<text>收货地址</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="updatePassword()">
				<view>
					<image src="../../static/center/psw.png" mode="widthFix" class="icons"></image>
					<text>修改密码</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<!-- <view class="item">
				<view>
					<image src="../../static/center/xxzx.png" mode="widthFix" class="icons"></image>
					<text>消息中心</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view> -->
			<view class="item" @click="myZixun()">
				<view>
					<image src="../../static/center/zixun.png" mode="widthFix" class="icons"></image>
					<text>我的咨询</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="myYuyue()">
				<view>
					<image src="../../static/center/yuyue.png" mode="widthFix" class="icons"></image>
					<text>我的预约</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="pingtaiGonggao()">
				<view>
					<image src="../../static/center/laba.png" mode="widthFix" class="icons"></image>
					<text>平台公告</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<!-- <view class="item">
				<view>
					<image src="../../static/center/tousu.png" mode="widthFix" class="icons"></image>
					<text>投诉建议</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view> -->
			<view @click="merchantPicture()" v-if="isGzh" class="item" id="image">
				<view>
					<image src="../../static/center/img.png" mode="widthFix" class="icons"></image>
					<text>商户图片</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="myTuijianren()">
				<view>
					<image src="../../static/center/teams.png" mode="widthFix" class="icons"></image>
					<text>团队管理</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<!-- <view class="item">
				<view>
					<image src="../../static/center/dashang.png" mode="widthFix" class="icons"></image>
					<text>打赏记录</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view> -->
			<view class="item" @click="myCode()">
				<view>
					<image src="../../static/center/qrcode_icon.png" mode="widthFix" class="icons"></image>
					<text>我的二维码</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="loginOut()" v-if="logined">
				<view>
					<image src="../../static/center/zx.png" mode="widthFix" class="icons"></image>
					<text>用户注销</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
		</view>
		<!-- <u-tabbar v-model="current" :list="list" :mid-button="false"></u-tabbar> -->
		<view class="tabbar">
			<view style="text-align: center;" @click="tabbarPage(0)">
				<uni-icons type="home" size="20"></uni-icons>
				<view>首页</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(1)">
				<uni-icons type="map" size="20"></uni-icons>
				<view>联盟商家</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(2)">
				<uni-icons type="list" size="20"></uni-icons>
				<view>分类</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(3)">
				<uni-icons type="cart" size="20"></uni-icons>
				<view>购物车</view>
			</view>
			<view style="text-align: center;color: #FF7900;">
				<uni-icons type="person" color="#FF7900" size="20"></uni-icons>
				<view>个人中心</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {uniNavBar},
		data() {
			return {
				logined:false,	// 是否登录
				userinfo:[],	// 用户信息
				isGzh:false,	// 是否是联盟商家，控制我的钱包和商户图片的显示隐藏
				gzhId:'',		// 联盟商家ID
				dfkcount:0,		// 待付款订单数量
				dfhcount:0,		// 待发货订单数量
				dshcount:0,		// 待收货订单数量
				thhcount:0,		// 退换货订单数量
				usersIntegral:0,// 用户可用积分
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: "/pages/jifen/index"
					},
					{
						iconPath: "grid",
						selectedIconPath: "grid-fill",
						text: '联盟商家',
						customIcon: false,
						pagePath: "/pages/jifen/merchant/merchantList"
					},
					{
						iconPath: "coupon",
						selectedIconPath: "coupon-fill",
						text: '分类',
						customIcon: false,
						pagePath: "/pages/jifen/goods/goodsFenlei"
					},
					{
						iconPath: "shopping-cart",
						selectedIconPath: "shopping-cart-fill",
						text: '购物车',
						customIcon: false,
						pagePath: "/pages/jifen/cart/cart"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/jifen/center/center"
					},
				],
				current: 4
			}
		},
		onLoad() {
			this.getJifenCenter()
			uni.$on('getJifenCenter', this.getJifenCenter)
		},
		methods: {
			//底部tab跳转
			tabbarPage(index){
				uni.redirectTo({
					url:index==0?'../index':(index==1?'../merchant/merchantList':(index==3?'../cart/cart':'../goods/goodsFenlei'))
				})
			},
			//app下载
			download(){
				uni.navigateTo({
					url:'../../pages/center/download?type=1'
				})
			},
			//查看积分记录
			goJifenRecord(){
				uni.navigateTo({
					url:'jifenZhuanRang'
				})
			},
			//修改用户名
			updateName(usersName){
				uni.navigateTo({
					url:'updateName?usersName='+usersName
				})
			},
			//初始化个人中心数据
			getJifenCenter(){
				this.logined = uni.getStorageSync('logined')
				if(this.logined){
					this.userinfo=uni.getStorageSync("userinfo");
					this.$http.get('/gzh/gzhxcx', {
						userid: uni.getStorageSync('usersId')
					}).then(res => {
						if(res.data.code == 200) {
							this.isGzh = true;
							this.gzhId = res.data.data.gid;
						}
					})
				}
				this.dfkcount = 0;
				this.dfhcount = 0;
				this.dshcount = 0;
				//查询所有类型订单数量
				this.$http.get('/apporder.do/getorderfenzu',{
					userid: uni.getStorageSync('usersId')
				}).then(res => {
					if(res.data.code==200){
						for (let i = 0; i < res.data.data.length; i++) {
							if(res.data.data[i].orStatus==0){
								this.dfkcount = res.data.data[i].geshu
							}else if(res.data.data[i].orStatus==1){
								this.dfhcount = res.data.data[i].geshu
							}else if(res.data.data[i].orStatus==2){
								this.dshcount = res.data.data[i].geshu
							}
						}
					}
				})
				this.thhcount = 0;
				//查询处于退款退货状态中的数量
				this.$http.get('/gzhRefund/getrefunding',{
					userid: uni.getStorageSync('usersId')
				}).then(res => {
					if(res.data.code==200){
						this.thhcount = res.data.count
					}
				})
				//重新查询用户可用积分
				this.$http.get('/userinfo/getJifenxcx',{
					userid:uni.getStorageSync('usersId')
				}).then(res => {
					if(res.data==0){
						this.usersIntegral = this.userinfo.usersIntegral;
					}else{
						this.usersIntegral = res.data;
					}
				})
			},
			swichIcon(){
				if(this.isNull(this.userinfo.icon)){
					let xcxIcon = uni.getStorageSync('xcxIcon');
					if(this.isNull(xcxIcon)){
						return '../../static/center/touxiang.png';
					}
					return xcxIcon;
				}else{
					return this.host+this.userinfo.icon;
				}
			},
			switchImg(obj,n){
				if(obj.length>0)
					return this.host+obj[n].gImages;
				else
					return '../../static/index/gm.png';
			},
			//点击扫一扫功能
			saoyisao(){
				// 允许从相机和相册扫码
				 uni.scanCode({
					 success: function (res) {
						 console.log('条码类型：' + res.scanType);
						 console.log('条码内容：' + res.result);
					 }
				 });
			},
			// 跳转到订单列表页面
			goOrders(n){
				uni.navigateTo({
					url:'orders/orderList?index='+n
				})
			},
			// 跳转到退换货记录页面
			goRefund(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'refund/refundList'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			// 跳转到收货地址
			shouHuo(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'../../pages/center/shouHuo'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//跳转到钱包界面
			wallet(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'wallet'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//跳转到充值界面
			chongzhi(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'recharge'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//跳转到修改密码界面
			updatePassword(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:this.isGzh ? 'updatePassword?type=1&gzhId='+this.gzhId : 'updatePassword?type=2'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//跳转到我的咨询界面
			myZixun(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'myZixun'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//跳转到我的预约界面
			myYuyue(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'myYuyue'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//跳转到平台公告
			pingtaiGonggao(){
				uni.navigateTo({
					url:'pingtaiGonggao'
				})
			},
			//跳转到商户图片界面
			merchantPicture(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'merchantPicture'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//跳转到团队管理页面
			myTuijianren(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'myTuijianren'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//注销,退出登录
			loginOut(){
				uni.showModal({
					title:'退出登录?',
					success:(res)=> {
						if(res.confirm){
							uni.removeStorageSync("usersId");
							uni.removeStorageSync("userinfo");
							uni.setStorageSync("logined",false);
							this.logined = false;
							this.isGzh=false;
							this.$store.state.logined=false;
							this.$store.state.user=null;
							this.getJifenCenter();
							uni.$emit("checkCart");				//携联商城购物车
							uni.$emit("checkUserInfo");			//携联商城个人中心加载用户数据
							uni.$emit('getOrderByGroup');		//携联商城个人中心加载订单数量
							uni.$emit('getJifenCat');			//积分商城购物车
							uni.$emit('init');					//品牌共享首页数据（商品价格）
							uni.$emit('getPinpaiOrderByGroup');	//品牌共享个人中心加载订单状态数量
							uni.$emit('checkPinpaiUserInfo');	//品牌共享个人中心加载用户数据
							uni.$emit('getXingyunUserInfo');	//幸运商城个人中心加载用户数据
						}else if(res.cancel){
							
						}
					}
				})
			},
			//跳转到我的二维码页面
			myCode(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'myCode'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style lang="scss" scoped>
	#jifen{
		padding: 2px 3px;
		background-color: red;
		color: white;
		border-radius: 4px;
	}
	.tabbarImage{
		width: 20px;
		height: 20px;
	}
	.tabbar{
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-align: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
		box-sizing: content-box;
		justify-content: space-around;
		background-color: white;
		font-size: 11px;
		padding: 20rpx 0 20rpx 0;
		border-top: 1rpx #DCDFE6 solid;
	}
	
	.logo{
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		background-color: white;
		margin: 20rpx auto;
	}
	.logo .names{
		margin-left: 20rpx;
		color: #111111;
		font-weight: bold;
	}
	.logo .name-box{
		display: flex;
		align-items: center;
	}
	.logo image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}
	.order-box,.shouhuo-box{
		padding: 40rpx 20rpx;
		background-color: white;
		margin-bottom: 20rpx;
	}
	.order-box .tips{
		font-size: 30rpx;
		font-weight: bold;
	}
	.order-box .all-order,.all-order2{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.order-box .all-order{
		padding-bottom:20rpx ;
		border-bottom: 1px solid #ccc;
	}
	.order-box .all-order navigator{
		color: red;
	}
	.order-box .all-order image{
		width: 10rpx;
		margin-left: 20rpx;
	}
	.order-types-box{
		display: flex;
		padding-top: 30rpx;
		justify-content: space-around;
	}
	.types-item image{
		width: 85rpx;
	}
	.types-item{
		position: relative;
	}
	.types-item .badge{
		position: absolute;
		top: 1rpx; 
		right: 0rpx;
		background-color: red;
		color: white;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		font-size: 20rpx;
		line-height: 30rpx;
		border-radius: 20rpx;
	}
	.order-box .all-order .huo{
		width: 30rpx;
		vertical-align: middle;
		position: relative;
		right: 20rpx;
	}
	.tui-box{
		display: flex;
		justify-content: space-around;
		padding-top: 20rpx;
	}
	.tui-box .gname{
		margin: 20rpx auto;
			font-size: 24rpx;
			overflow: hidden;
			color: #8f8f94;
			text-overflow: ellipsis;
			white-space: nowrap;
	}
	.tui-box .img{
		// width: 200rpx;
		height: 120rpx;
	}
	.tui-box .tui-item{
		width: 25%;
		text-align: center;
		padding: 10rpx;
	}
	.tui-box .jiage{
		background-color: red;
		color: #FFFFFF;
		border-radius: 40rpx;
		width: 80%;
		margin: auto;
		padding: 2px 0px;
		font-size: 22rpx;
		text-align: center;
	}
	.shouhuo-box>.item{
		display: flex;
		padding: 20rpx 20rpx;
		justify-content: space-between;
	}
	.shouhuo-box .icons{
		width: 30rpx;
		margin-right: 20rpx;
	}
	.shouhuo-box .gduo{
		width: 10rpx;
	}
</style>
